<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <!--需求2：展示填写或者选中的内容-->
        <div>输入的姓名是：{{user.username}}</div>
        <div>输入的年龄是：{{user.age}}</div>
        <div>选择的性别是：{{user.gender}}</div>
        <div>选择的爱好是：{{user.hobbies}}</div>

        <form>
            <!--需求1：将表单和vue进行双向数据绑定-->
            姓名：<input type="text" name="username" v-model="user.username"><br>
            年龄：<input type="number" name="age" v-model="user.age"><br>

            性别：<input type="radio" name="gender" v-model="user.gender" value="man">男
                 <input type="radio" name="gender" v-model="user.gender" value="woman">女<br>

            爱好：<input type="checkbox" name="hobbies" value="sing" v-model="user.hobbies">唱
                 <input type="checkbox" name="hobbies" value="dance" v-model="user.hobbies">跳
                 <input type="checkbox" name="hobbies" value="rap" v-model="user.hobbies">rap
                 <input type="checkbox" name="hobbies" value="basketball" v-model="user.hobbies">篮球<br>
            <!--需求3：点击按钮，通过ajax把表单数据发送给服务器-->
            <input type="button" value="提交信息" @click="sendData()">

        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
          el:"#div",
        data: {
            user: {
                username: "贱贱",
                age: 22,
                gender: "man",//与那个radio的value属性值匹配就选择哪个radio,取得值是radio的value值
                hobbies: []
            }
        },
            methods: {
                sendData() {
                    //1.获取表单数据
                    console.log(this.user);
                    //2.通过ajax发送给服务器
                }
            }
    });
</script>
</html>